<template>
  <main>
    <div class="container">
      <h1>HOME</h1>
      <ul>
        <li v-for="item in msgList" :key="item.id">
          <!-- <router-link :to="'/router-practise/home/detail?'">{{item.msg}}</router-link> -->
          <!-- <router-link
            :to="{
              name: 'my-detail',
              query: {
                id: item.id,
                msg: item.msg,
              },
            }"
            >{{ item.msg }}</router-link
          > -->
          <button @click="showData(item)">{{item.msg}}</button>
        </li>
      </ul>
      <hr />
      <router-view></router-view>
    </div>
  </main>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      msgList: [
        { id: '001', msg: '一楼' },
        { id: '002', msg: '二楼' },
        { id: '003', msg: '三楼' },
      ],
    };
  },
  components: {},
  methods: {
    showData(item) {
      this.$router.push({
        name: 'my-detail',
        query: {
          id: item.id,
          msg: item.msg,
        },
      });
    },
  },
};
</script>

<style>
</style>
